<link rel="stylesheet" href="/stylesheets/admin.css">
<style>
    .has-right {
        color: green;
    }
    .none-right {
        color: red;
    }
</style>
<div class="row">
    <div class="col-xs-12">
        <div class="setting-div">
            <div class="setting-header-div">
                <button id="create-btn" class="create-btn btn btn-default">添加文档分类</button>
                <hr>
            </div>
            <div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>分类名称</th>
                        <th>是否首页展示</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="list-body">
                    </tbody>
                </table>
            </div>
            <div class="setting-footer-div">

            </div>
        </div>
        <div style="height: 40px"></div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加文档分类</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">分类名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="name" placeholder="请输入分类名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="recommend" class="col-sm-3 control-label">首页展示</label>
                        <div class="col-sm-9" style="line-height: 34px;height: 34px">
                            <input type="checkbox" id="recommend">&nbsp;勾选后将在首页展示
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="submit-btn" class="btn btn-primary">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script language="JavaScript">

    var editId = null;

    $("#create-btn").click(function () {
        $('#myModalLabel').text('添加文档分类');
        $('#name').val('');
        $('#recommend').attr('checked',false);
        $('#myModal').modal('show');
        editId = null;
    })

    function editClick(node) {
        $('#myModalLabel').text('编辑文档分类');
        let tdNode = node.parentNode.parentNode;
        let id = tdNode.id;

        $('#name').val(tdNode.getElementsByTagName('td')[0].innerText);
        let sel = $('#recommend-' + id).text();
        console.log(id + ' ' + sel);
        $('#recommend').attr('checked',(sel === '是'));

        $('#myModal').modal('show');
        editId = id;
    }

    $("#submit-btn").click(function () {
        let name = $('#name').val();
        let recommend = $('#recommend').prop('checked');
        let param = {
            name : name,
            recommend : recommend,
            id : editId
        };
        console.log(JSON.stringify(param));
        if (name.trim().length === 0) {
            showError('分类名称不能为空');
            return;
        }
        if (editId) {
            $.post("/ueditor/classify/edit",param, function(data) {
                if (data.code === 0) {
                    $('#myModal').modal('hide');
                    showSuccess('已更新文档分类 ' + name);
                    loadDocClassifyList();
                } else  {
                    showError(data.message);
                }
            });
        } else  {
            $.post("/ueditor/classify/add",param, function(data) {
                if (data.code === 0) {
                    $('#myModal').modal('hide');
                    showSuccess('已添加文档分类 ' + name);
                    loadDocClassifyList();
                } else  {
                    showError(data.message);
                }
            });
        }
    })

    $(function () {
        loadDocClassifyList();
    })

    function loadDocClassifyList() {
        $.post("/ueditor/classify/list",function (data) {
            if (data.code == 0) {
                var parent = document.getElementById('list-body');
                for (var i = parent.children.length - 1; i >= 0; i--) {
                    parent.removeChild(parent.children[i]);
                }
                for (var i = 0 ; i < data.data.length ; i++) {
                    var classify = data.data[i];
                    var classifyNode = document.createElement('tr');
                    var id = classify._id;

                    classifyNode.id = id;

                    var nameNode = document.createElement('td');
                    nameNode.id = 'name-' + id;
                    nameNode.innerText = classify.name;

                    var recommendNode = document.createElement('td');
                    recommendNode.id = 'recommend-' + id;
                    recommendNode.innerText = classify.recommend ? '是' : '否';

                    var  editNode = document.createElement('td');
                    editNode.innerHTML = "<a onclick='editClick(this)'>编辑</a>&nbsp;&nbsp;<a>删除</a>";

                    classifyNode.appendChild(nameNode);
                    classifyNode.appendChild(recommendNode);
                    classifyNode.appendChild(editNode);

                    parent.appendChild(classifyNode);
                }

            } else  {

            }
        })
    }
</script>